<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <script src="../js/myQuery.js"></script> -->
  <!-- <script src="../js/jquery-1.10.1.min.js"></script> -->
  <script src="../js/My_Query.js"></script>

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    h3 {
      line-height: 60px;
    }

    li {
      list-style: none;
      line-height: 40px;
      border: 1px dashed #333;
    }

    .list {
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <h3 id="title">批量操作元素</h3>
    <ul class="list">
      <li>01</li>
      <li>02</li>
      <li>03</li>
      <li>04</li>
      <li>05</li>
      <li>06</li>
    </ul>
    <!-- <input type="text" class="demo"> -->
  </div>
  <div class="box">
    <button class="setHtml">
      设置html
    </button>
    <button class="getHtml">
      获取html
    </button>
    <button class="hide">隐藏</button>
    <button class="show">显示</button>
    <button class="setWidth">
      设置宽度
    </button>
    <button class="getWidth">
      获取宽度
    </button>
    <button class="attr">attr</button>
    <button class="prop">prop</button>
    <button class="css">css</button>
    <button class="addClass">addClass</button>
    <button class="removeClass">removeClass</button>
    <button class="eq">eq</button>
    <button class="siblings">siblings</button>
    <button class="chain">链式操作</button>
  </div>
</body>
<script>






  // function getStyle(ele, attr) {
  //     if (window.getComputedStyle) {
  //         return window.getComputedStyle(ele)[attr];
  //     } else {
  //         return ele.currentStyle[attr];
  //     }
  // }



  $(".list li").click(function () {
    console.log(this);
  });

  $(".setHtml").click(function () {
    $(".list li").html("123123");
  })

  $(".getHtml").click(function () {
    alert($(".list li").html());
  })

  $(".hide").click(function () {
    $(".list li").hide();
  })
  $(".show").click(function () {
    $(".list li").show();
  })
  $(".setWidth").click(function () {
    // $(".list li").width("200px");
    $(".list li").width("200.5px");
    // $(".list li").width(200.5);
  })
  $(".getWidth").click(function () {
    alert($(".list li").width())
  })
  $(".attr").click(function () {
    $(".list li").attr("class", "newLi");
    $(".list li").attr("asd", "asd");
    console.log($(".list li").attr("class"));
  })
  $(".prop").click(function () {
    $(".list li").prop();
    $(".list li").prop("className", "newLi");
    console.log($(".list li").prop("classList"));
  })
  $(".css").click(function () {
    // $(".list li").css("background", "red");
    // $(".list li").css("width", "100px");
    // $(".list li").css("height", "100px");
    // $(".list li").css("float", "left");
    // $(".list li").css("text-align", "center");
    // $(".list li").css("line-height", "100px");

    console.log($(".list li").css("width"));

    $(".list li").css({
      background: "red",
      width: "100px",
      height: "100px",
      float: "left",
      textAlign: "center",
      lineHeight: "100px",
    })
  })

  $(".addClass").click(function () {
    $(".list li").addClass("one two three");
  })
  $(".removeClass").click(function () {
    $(".list li").removeClass("one three");
  })
  $(".eq").click(function () {
    console.log($(".list li").eq(1));  // li

    $(".list li").eq(1).css({
      background: "red",
      width: "100px",
      height: "100px",
      textAlign: "center",
      lineHeight: "100px",
    })
  })

  $(".siblings").click(function () {
    $(".list li").eq(1).siblings().css({
      background: "green",
      width: "100px",
      height: "100px",
      textAlign: "center",
      lineHeight: "100px",
    })
  })

  $(".chain").click(function () {
    $(".list li").click(function () {
      console.log(this);
    }).eq(0).html(1111).width(200).height(200).css({
      background: "red",
    }).siblings().html(222222).width(100).height(100).css({
      background: "blue"
    })
  })













</script>

</html>